<template>
  <div class="xing-transfer">
    <el-card>
      <p>业务场景：</p>
      <p>穿梭框数据项根据具体需求渲染,增加点击事件</p>
      <p>增加点击事件会出现冒泡,需采用prevent</p>
    </el-card>
    <el-transfer
      style="margin-top: 30px"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入城市拼音"
      v-model="value"
      :data="data">
      <template slot-scope="scope">
        <span>
          <span>{{scope.option.label}}</span>
          <span @click.prevent="handleAlert(scope.option.label)" style="margin-left: 20px"><i class="el-icon-edit"></i></span>
        </span>
      </template>
    </el-transfer>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>{{label}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    const generateData = _ => {
      const data = []
      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        })
      })
      return data
    }
    return {
      data: generateData(),
      value: [],
      dialogVisible: false,
      label: '',
      filterMethod (query, item) {
        return item.pinyin.indexOf(query) > -1
      }
    }
  },
  methods: {
    handleAlert (label) {
      // alert(label)
      this.label = label
      this.dialogVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>
<style lang="scss">
  .xing-transfer {
    .el-transfer {
      .el-input {
        width: 85%;
      }
    }
    .el-dialog__header {
      display: none;
    }
  }

</style>
